<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增页面</title>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <style>
        .pear-container {
            background-color: white;
        }

        body {
            margin: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">

        <div class="layui-row">
            <div class="layui-col-xs6">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="1" title="菜单" checked>
                    <input type="radio" name="type" value="2" title="接口">
                </div>

            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="可用" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
        </div>

    </div>
    <div class="layui-form-item">

        <div class="layui-row">
            <div class="layui-col-xs6">

                <label for="" class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" id="name" maxlength="16" name="name" lay-verify="required" placeholder="名称" class="layui-input">
                </div>
            </div>

            <div class="layui-col-xs6">

                <label class="layui-form-label">所属上级</label>
                <div class="layui-input-block">
                    <div class="layui-form-select downpanel">
                        <div class="layui-select-title">
                            <input id="parent_name" type="text" placeholder="空为默认" value="" class="layui-input" disabled>
                            <input id="pid" name="pid" type="hidden" value="0">
                            <i class="layui-edge"></i>
                        </div>
                        <dl class="layui-anim layui-anim-upbit">
                            <dd>
                                <div id="leamus_tree" class="demo-tree-more"></div>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="layui-form-item">

        <div class="layui-row">
            <div class="layui-col-xs6">
                <label class="layui-form-label">API地址</label>
                <div class="layui-input-block">
                    <input type="text" id="api_path" name="api_path" placeholder="请输入API地址" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">方法</label>
                <div class="layui-input-block">
                    <input name="methods" placeholder="方法" class="layui-input" id="leamus_methods">
                </div>
            </div>
        </div>

    </div>

    <div class="layui-form-item">

        <div class="layui-row">
            <div class="layui-col-xs6">
                <label class="layui-form-label">菜单地址</label>
                <div class="layui-input-block">
                    <input id="menu_path" type="text" name="menu_path" placeholder="请输入菜单地址" class="layui-input">
                </div>
            </div>
            <div class="layui-col-xs6">
                <label class="layui-form-label">显示</label>
                <div class="layui-input-block">
                    <input type="radio" name="show" value="1" title="显示" checked>
                    <input type="radio" name="show" value="0" title="隐藏">
                </div>
            </div>
        </div>

    </div>

    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <label for="" class="layui-form-label">Auth</label>
                <div class="layui-input-block">
                    <input id="unique_auth" type="text" name="unique_auth" placeholder="前端权限标识" class="layui-input">
                </div>
            </div>

            <div class="layui-col-xs6">
                <label for="" class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input id="sort" type="number" name="sort" value="10" lay-verify="required" placeholder="排序权重" class="layui-input">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <label for="" class="layui-form-label">图标</label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="text" id="iconPicker2" name="icon" value="layui-icon-face-smile" lay-filter="iconPicker2" class="hide">
                    </div>
                    <div class="layui-input-block" style="position:absolute;">
                        <span class="pear-btn" id="clear">清空</span>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
</form>


<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/config.js"></script>


<script>
    const PRIMARY_KEY = "id";
    const DETAIL_API = lms_config.api_url + "/api/setting/permission/get";
    const INSERT_API = lms_config.api_url + "/api/setting/permission/insert";
    const UPDATE_API = lms_config.api_url + "/api/setting/permission/update";


    if (!checkLogin()) {
        location.href = lms_config.base_path + "/login.html";
    }


    layui.use(['form', 'element', 'iconPicker', 'jquery', 'tree', 'dropdown'], function () {
        var form = layui.form;
        var element = layui.element;
        var iconPicker = layui.iconPicker;
        var $ = layui.jquery;

        var tree = layui.tree;
        var dropdown = layui.dropdown;

        dropdown.render({
            elem: '#leamus_methods'
            , data: [{
                title: 'POST'
                , id: 1
            }, {
                title: 'GET'
                , id: 2
            }, {
                title: 'PUT'
                , id: 3
            }, {
                title: 'DELETE'
                , id: 4
            }]
            , click: function (obj) {
                this.elem.val(obj.title);
            }
            , style: 'width: 235px;'
        });


        let arrMenus = fMakeMenu(getUserInfo().rules);
        arrMenus.unshift({
            "id": 0,
            "title": "顶层",
        });
        //仅节点左侧图标控制收缩
        tree.render({
            elem: '#leamus_tree'
            , onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
            , click: function (obj) {
                $("#parent_name").val(obj.data.title);
                $("#pid").val(obj.data.id);
            }
            , data: arrMenus

        });
        //下拉交互显示
        $(".downpanel").on("click", ".layui-select-title", function (e) {
            $(".downpanel").not($(this).parents(".downpanel")).removeClass("layui-form-selected");
            $(this).parents(".downpanel").toggleClass("layui-form-selected");
            layui.stope(e);
        }).on("click", "dl i", function (e) {
            layui.stope(e);
        });
        $(document).on("click", function (e) {
            $(".downpanel").removeClass("layui-form-selected");
        });


        iconPicker.render({
            elem: '#iconPicker2',
            type: 'fontClass',
            style: 'color: #5FB878;'
            , placeholder: ''
            , isSplit: true
            , page: false
            //,limit: 5
            , search: true
            , click: function (data) {
            },
            ready: function (d) {
            }
        });
        $('#clear').click(function () {
            iconPicker.checkIcon('iconPicker2', "layui-icon-face-smile");
        });


        let method = 'POST';
        if (getQueryString('operation') === 'edit') {
            method = 'PUT';
            $('[name=type]').each(function (i, item) {
                if ($(item).val() == getQueryString('type')) {
                    $(item).prop('checked', true);
                } else
                    $(item).prop('checked', false);
            });
            $('[name=status]').each(function (i, item) {
                if ($(item).val() == getQueryString('status')) {
                    $(item).prop('checked', true);
                } else
                    $(item).prop('checked', false);
            });
            $('[name=show]').each(function (i, item) {
                if ($(item).val() == getQueryString('show')) {
                    $(item).prop('checked', true);
                } else
                    $(item).prop('checked', false);
            });
            //$('#name').attr('value', decodeURI(getQueryString('name')));
            $('#name').attr("value", decodeURI(getQueryString('name')));
            //$('#parent_name').attr("value", decodeURI(getQueryString('parent_name')));
            $('#pid').attr("value", (getQueryString('pid')));
            $('#api_path').attr("value", (getQueryString('api_path')));
            $('#leamus_methods').attr("value", (getQueryString('methods')));
            $('#menu_path').attr("value", (getQueryString('menu_path')));
            //$('#iconPicker2').attr("value", (getQueryString('icon')));
            $('#sort').attr("value", (getQueryString('sort')));
            iconPicker.checkIcon('iconPicker2', getQueryString('icon'));

            form.render();
        }


        form.on('submit(save)', function (data) {
            if (method === 'PUT') {
                data.field[PRIMARY_KEY] = layui.url().search[PRIMARY_KEY]
            }
            $.ajax({
                url: method === 'POST' ? INSERT_API : UPDATE_API,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                dataType: 'json',

                success: function (ret) {
                    if (ret && ret.code == 0) {
                        layer.msg(ret.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.refresh();
                        });
                    } else {
                        layer.msg(ret.msg, {
                            icon: 2,
                            time: 1000
                        });
                        return false;
                    }
                },
                error: function (ret) {
                    alert("出错" + ret.status + "：" + ret.responseText);
                }, //表示如果请求响应出现错误，会执行的回调函数
            });
            return false;
        });
    });
</script>
</body>
</html>
